<template>
    <div>
        <div><h1>商户审核</h1></div>
        <div>
            <el-form
                :inline="true"
                :model="searchForm"
                class="demo-form-inline"
            >
                <el-form-item label="关键字">
                    <el-input
                        v-model="searchForm.keyWord"
                        placeholder="请输入关键字"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="性别">
                    <el-select
                        v-model="searchForm.gender"
                        placeholder="请选择性别"
                        style="width: 140px"
                        clearable
                    >
                        <el-option label="男" :value="0" />
                        <el-option label="女" :value="1" />
                    </el-select>
                </el-form-item>

                <el-form-item label="开始时间">
                    <el-date-picker
                        v-model="searchForm.startDate"
                        type="datetime"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        placeholder="请选择开始时间"
                    />
                </el-form-item>
                <el-form-item label="截止时间">
                    <el-date-picker
                        v-model="searchForm.endDate"
                        type="datetime"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        placeholder="请选择截止时间"
                    />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onQuery">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="userId" label="用户ID" width="100" />
                <el-table-column prop="userName" label="登录账号" width="160" />
                <el-table-column prop="nickName" label="真实姓名" width="120" />
                <el-table-column prop="gender" label="性别" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.gender == 0" type="success"
                            >男</el-tag
                        >
                        <el-tag v-if="scope.row.gender == 1" type="danger"
                            >女</el-tag
                        >
                    </template>
                </el-table-column>
                <el-table-column prop="userMobile" label="手机号" width="160" />
                <el-table-column prop="userStatus" label="状态" width="200">
                    <template #default="scope">
                        <el-tag v-if="scope.row.userStatus == 0">待审核</el-tag>
                        <el-tag v-if="scope.row.userStatus == 1"
                            >审核通过</el-tag
                        >
                        <el-tag v-if="scope.row.userStatus == 2"
                            >审核驳回</el-tag
                        >
                    </template>
                </el-table-column>
                <el-table-column prop="reason" label="驳回原因" width="160">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="注册时间"
                    width="180"
                />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button
                            type="primary"
                            size="small"
                            @click="onCheckUser(scope.row)"
                            >审核</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="margin-top: 20px">
            <el-pagination
                v-model:current-page="searchForm.pageNum"
                v-model:page-size="searchForm.pageSize"
                :page-sizes="[2, 4, 6, 8]"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <div>
            <el-dialog v-model="dialogFormVisible" title="修改商户" width="500">
                <el-form :model="form">
                    <el-form-item
                        label="真实姓名"
                        :label-width="formLabelWidth"
                    >
                        <el-input v-model="form.nickName" autocomplete="off" />
                    </el-form-item>
                    <el-form-item
                        label="登录账号"
                        :label-width="formLabelWidth"
                    >
                        <el-input
                            v-model="form.userName"
                            disabled
                            autocomplete="off"
                        />
                    </el-form-item>
                    <el-form-item label="手机号" :label-width="formLabelWidth">
                        <el-input
                            v-model="form.userMobile"
                            autocomplete="off"
                        />
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <el-input
                            v-model="form.userStatus"
                            autocomplete="off"
                        />
                    </el-form-item>
                    <el-form-item label="性别" :label-width="formLabelWidth">
                        <el-select
                            v-model="form.gender"
                            placeholder="请选择性别"
                        >
                            <el-option label="男" :value="0" />
                            <el-option label="女" :value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        prop="reason"
                        label="驳回原因"
                        :label-width="formLabelWidth"
                    >
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible = false"
                            >放弃</el-button
                        >
                        <el-button type="primary" @click="onSubmitEdit">
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
        <div>
            <el-dialog
                v-model="checkFormVisible"
                title="商户审核"
                width="500"
            >
                <el-form :model="form">
                    <el-form-item
                        label="登录账号"
                        :label-width="formLabelWidth"
                    >
                        <el-input v-model="form.userName" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="性别" :label-width="formLabelWidth">
                        <el-select
                            v-model="form.gender"
                            disabled
                            placeholder="请选择行呗"
                        >
                            <el-option label="男" :value="0" />
                            <el-option label="女" :value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="审核"
                        :label-width="formLabelWidth"
                    >
                    <el-switch v-model="form.userStatus" 
                        active-text="通过" 
                        inactive-text="驳回" 
                        :active-value="1"
                        :inactive-value="2"
                    />
                    </el-form-item>
                    <el-form-item
                        label="驳回原因"
                        :label-width="formLabelWidth"
                    >
                        <el-input v-model="form.reason" type="textarea" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="checkFormVisible = false"
                            >放弃</el-button
                        >
                        <el-button
                            type="primary"
                            @click="onSubmitCheckUser"
                        >
                            提交
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import {
    getUserList,
    updateUser,
    deleteUserById,
    deleteUserAll,
    checkUser,
} from "@/api/api";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";

// 定义变量
const tableData = ref([]);
const searchForm = ref({
    pageNum: 1, // 页码
    pageSize: 2, // 每页显示的条数
    keyWord: null, // 关键字
    gender: null, // 性别
    startDate: null, // 开始时间
    endDate: null, // 结束时间
});
const total = ref(0); // 总条数

const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const form = ref({
    createTime: "",
    gender: 0,
    nickName: "",
    reason: "",
    token: "",
    userAvatar: "",
    userEmail: "",
    userId: 0,
    userMobile: "",
    userName: "",
    userPass: "",
    userStatus: 0,
});

const imageUrl = ref("");
const headers = ref({
    token: window.sessionStorage.getItem("token") || "",
});


const checkFormVisible = ref(false);
const multipleSelection = ref<any[]>([]);


// 审核按钮的点击事件
const onSubmitCheckUser = () => {
    // 驳回，必须填写驳回原因
    if(form.value.userStatus == 2) {
        if(form.value.reason == null || form.value.reason == "") {
            ElMessage.error("请填写驳回原因");
            return;
        }
    }

    // 提交审核
    checkUser(form.value).then(res => {
        console.log(res);
        if(res.data.code == 200) {
            ElMessage.success("审核成功");
            checkFormVisible.value = false;
            loadList();
        }
        else {
            ElMessage.error(res.data.msg);
        }
    })

}

const handleSelectionChange = (val: any[]) => {
    multipleSelection.value = val;
};

// 审核按钮的点击事件
const onCheckUser = (row: any) => {
    console.log("onCheckUser", row);
    Object.assign(form.value, row);
    checkFormVisible.value = true;
};

// 批量删除按钮的点击事件
const handleDeleteAll = () => {
    console.log("handleDeleteAll");
    ElMessageBox.confirm("批量删除后的数据无法恢复，您确认要删除吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "放弃",
        type: "warning",
    })
        .then(() => {
            // 确认删除
            deleteUserAll(multipleSelection.value).then((res) => {
                console.log(res);
                if (res.data.code == 200) {
                    ElMessage.success("删除成功");
                    loadList();
                } else {
                    ElMessage.error(res.data.msg);
                }
            });
        })
        .catch(() => {
            // 放弃删除
        });
};

// 图片上传成功的回调函数
const handleAvatarSuccess: UploadProps["onSuccess"] = (
    response,
    uploadFile
) => {
    //imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    console.log("handleAvatarSuccess", response);
    // 图片上传成功后，将图片的地址赋值给form对象的userAvatar属性
    form.value.userAvatar = response.data;
    imageUrl.value = form.value.userAvatar;
};

// 保存按钮的点击事件
const onSubmitEdit = () => {
    console.log(form.value);
    updateUser(form.value).then((res: any) => {
        console.log(res);
        if (res.data.code == 200) {
            ElMessage.success("修改成功");
            dialogFormVisible.value = false;
            loadList();
        } else {
            ElMessage.error(res.data.msg);
        }
    });
};

// 编辑按钮的点击事件
const handleEdit = (row: any) => {
    console.log(row);
    Object.assign(form.value, row);
    imageUrl.value = row.userAvatar;
    dialogFormVisible.value = true;
};

// 删除按钮的点击事件
const handleDelete = (row: any) => {
    console.log(row);
    ElMessageBox.confirm("删除数据后无法恢复，您确认要删除吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "放弃",
        type: "warning",
    })
        .then(() => {
            // 确认删除
            deleteUserById(row.userId).then((res) => {
                console.log(res);

                if (res.data.code == 200) {
                    ElMessage.success("删除成功");
                    loadList();
                } else {
                    ElMessage.error(res.data.msg);
                }
            });
        })
        .catch(() => {
            // 放弃删除
        });
};

// 查询按钮的点击事件
const onQuery = () => {
    loadList();
};

const loadList = () => {
    getUserList(searchForm.value).then((res: any) => {
        console.log(res);
        if (res.data.code == 200) {
            tableData.value = res.data.data.records;
            total.value = res.data.data.total;
        }
    });
};

// 分页大小改变事件
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`);
    searchForm.value.pageSize = val;
    loadList();
};

// 页码改变事件
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
    searchForm.value.pageNum = val;
    loadList();
};

// 页面加载钩子函数
onMounted(() => {
    loadList();
});
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
